<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/plan.css">
</head>
<body>
	<form action="">
		<header class="header">
			<div class="sl">
				<p class="logo">
					<img src="images/logo.png" id="logo-img">|调度管理平台
				</p>
				<ul>
					<li>
						<a href="page.jsp" class="underline">首页</a>
					</li>
					<li>
						<a href="plan.jsp" class="underline">方案中心</a>
					</li>
				</ul>
				<p class="dh">
					<img src="images/dh.png" id="dh-img">10022-88888
				</p>
				<ul>
					<li>
						<a href="login.jsp">登录</a>
					</li>
					<li>
						<a href="register.jsp" class="sl-mf">免费试用</a>
					</li>
				</ul>
			</div>
			<div class="slideshow-container">
			    <div class="mySlides fade">
			        <img src="images/bj1.png" id="login-img">
			    </div>

			    <div class="mySlides fade">
			        <img src="images/bj2.png" id="login-img">
			    </div>

			    <div class="mySlides fade">
			        <img src="images/bj3.png" id="login-img">
			    </div>

			    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
			    <a class="next" onclick="plusSlides(1)">&#10095;</a>
			</div>
		</header>
		<footer id="footer">
			<img src="images/fygl-bj.jpg" alt="">
			<div id="fygl">
				<h1 class="fygl-tm">费用管理</h1>
				<ul>
					<li>
						<img src="images/g.png" alt="" class="fygl-img">
						费用自定义
					</li>
					<li>
						<img src="images/g.png" alt="" class="fygl-img">
						车俩费用统计
					</li>
				</ul>
				<ul>
					<li>
						<img src="images/g.png" alt="" class="fygl-img">
						司机费用
					</li>
					<li>
						<img src="images/g.png" alt="" class="fygl-img">
						总花销
					</li>
				</ul>
				<p>
					<a href="register.jsp" class="glfy-ck">点击查看</a>
				</p>
			</div>
		</footer>
	</form>
</body>
<script>
	let slideIndex = 0;
	showSlides();

	function showSlides() {
	    let i;
	    let slides = document.getElementsByClassName("mySlides");
	    for (i = 0; i < slides.length; i++) {
	        slides[i].style.display = "none";
	    }
	    slideIndex++;
	    if (slideIndex > slides.length) {slideIndex = 1}
	    slides[slideIndex-1].style.display = "block";
	    setTimeout(showSlides, 2000); // Change image every 2 seconds
	}

	function plusSlides(n) {
	    showSlides(slideIndex += n);
	}

	function currentSlide(n) {
	    showSlides(slideIndex = n);
	}	
</script>
</html>